<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/page.css">
</head>

<body>
    <div class="container">
        <div class="days">
            <div id="dayNum"></div>
            <div id="days"></div>
        </div>
        <div class="show">
            <ul class="time">
            <li>
                <div class="upBox beforeTime"></div>
                <div class="downBox beforeTime"></div>
                <div class="upBox afterTime"></div>
                <div class="downBox afterTime"></div>
            </li>
            <li style="color: black; font-size: 2rem;">时</li>
            <li>
                <div class="upBox beforeTime"></div>
                <div class="downBox beforeTime"></div>
                <div class="upBox afterTime"></div>
                <div class="downBox afterTime"></div>
            </li>
            <li style="color: black; font-size: 2rem;">分</li>
            <li>
                <div class="upBox beforeTime"></div>
                <div class="downBox beforeTime"></div>
                <div class="upBox afterTime"></div>
                <div class="downBox afterTime"></div>
            </li>
        </ul>
        </div>
    </div>

    <script type='text/javascript' src="js/page.js"></script>
</body>
<script type="text/javascript">
    const timeDifference = () => {
        let start = new Date('2023-8-31 01:30:00')// 开始时间
        let end = new Date(); // 结束时间
        let startDate = new Date(start).getTime();
        let endDate = new Date(end).getTime();
        let dateCha = endDate - startDate;
        //计算出相差天数
        let days = Math.floor(dateCha / (24 * 3600 * 1000));
        //计算出小时数
        let leave1 = dateCha % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        let hours = Math.floor(leave1 / (3600 * 1000));
        //计算相差分钟数
        let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        let minutes = Math.floor(leave2 / (60 * 1000)); // 分
        //计算相差秒数
        let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        let seconds = Math.round(leave3 / 1000); // 秒
        //第几天
        let dayNum;
        if( seconds > 0 && new Date().getSeconds() > 0) {
            dayNum = days + 1;
        }
        let results = {
            days:days,
            hours:hours,
            minutes:minutes,
            seconds:seconds,
            dayNum:dayNum,
        }
        return results;
    }
    const showTime = (func) => {
        let difference = func();
        let num = '第' + difference.dayNum + '天';
        let day = '共' + difference.days + '天';
        document.getElementById("dayNum").innerHTML = num;
        document.getElementById("days").innerHTML = day;
    }
    showTime(timeDifference);
</script>
<style>
    #dayNum {
        font-size: 4.5rem;
        margin-bottom: 0.5rem;
        font-family: 黑体;
    }
    #days {
        font-size: 2.5rem;
    }
</style>
</html>